<template>
    <view class="p-[32rpx] w-[100%] pb-[170rpx]">
        <view class="w-[100%] pt-[26rpx] mb-[24rpx] rounded-[20rpx] bg-[#FFD95A]">
            <view class="w-[100%] bg-[#fff] rounded-[20rpx] px-[18rpx] py-[30rpx]">
                <view class="flex items-center pb-[28rpx]" style="border-bottom: 2rpx solid #EDEDED;">
                    <image
                        src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng3da3971ff80f4971af9a5d29e4958344e0983715d54346dab4311ea4590565fd"
                        class="w-[186rpx] h-[66.93rpx] mr-[38rpx] ml-[16rpx]"></image>
                    <view class="flex flex-col">
                        <text class="text-[36rpx] font-[550] mb-[12rpx] text-[#000000]">本田CR-V</text>
                        <text class="text-[24rpx] text-[#666] mb-[12rpx]">2014款 2.0L 四驱经典版</text>
                        <text class="text-[24rpx] text-[#666] ">
                            新车指导价：<text class="text-[red]">21.78万</text>
                        </text>
                    </view>
                </view>
                <view class="flex justify-between items-center py-[26rpx]" style="border-bottom: 2rpx solid #EDEDED;">
                    <view>
                        <view class="text-[#666] text-[24rpx]">品牌</view>
                        <view class="text-[28rpx] text-[#000] mt-[12rpx]">东风本田</view>
                    </view>
                    <view>
                        <view class="text-[#666] text-[24rpx]">车系</view>
                        <view class="text-[28rpx] text-[#000] mt-[12rpx]">CR-V</view>
                    </view>
                    <view>
                        <view class="text-[#666] text-[24rpx]">车型</view>
                        <view class="text-[28rpx] text-[#000] mt-[12rpx]">2.0四驱经典版</view>
                    </view>
                </view>
                <view class=" text-center mt-[28rpx] text-[#FF9E2E] text-[28rpx]">查看更多配置</view>
            </view>
        </view>
        <view class="mb-[24rpx] py-[28rpx] px-[16rpx] w-[100%] rounded-[20rpx] p-[20rpx] bg-[#fff]">
            <view class="text-[32rpx] font-[600] text-[#000] mb-[24rpx]">
                <view class="mb-[8rpx]">基础信息</view>
                <view class="w-[84rpx] h-[8rpx] bg-[#FFEFB8] rounded-[4rpx]"></view>
            </view>
            <view v-for="item in infoList" :key="item.label" class="mb-[36rpx] text-[28rpx] flex w-[100%]">
                <view class="w-[168rpx] overflow-hidden text-[#999] mr-[52rpx]">{{ item.label }}</view>
                <view class="text-[#000] flex-1">{{ item.value }}</view>
            </view>
        </view>
        <view class="rounded-[20rpx] w-[100%] ">
            <view class="w-[100%] pl-[16rpx] pr-[30rpx] h-[146rpx] justify-between flex items-center"
                style="background: linear-gradient(#FFF0C0 0%, #FFFFFF 50%);">
                <view class="text-[#000] flex flex-col text-[32rpx] font-[550]">
                    <text>车源特征</text>
                    <text class="text-[24rpx] text-[#333]">以下特征根据大数据模型进行测算，仅供参考</text>
                </view>
                <image scr="" class="w-[83.8rpx] h-[74rpx]"></image>
            </view>
            <view class="bg-[#fff] rounded-[20rpx] px-[22rpx] pb-[24rpx]">
                <view class="w-[100%] mb-[36rpx] flex items-center ">
                    <view
                        class="w-[166rpx] h-[64rpx] text-center leading-[64rpx] text-[28rpx] text-[#FFEFB8] rounded-[8rpx]"
                        style="background: linear-gradient( 98deg, #454545 0%, #000000 100%);">跟进记录</view>
                    <view
                        class="w-[166rpx] h-[64rpx] text-center leading-[64rpx] text-[28rpx] text-[#000] rounded-[8rpx] mx-[16rpx]"
                        style="background: #FFEFB8;">通话记录</view>
                    <view
                        class="w-[166rpx] h-[64rpx] text-center leading-[64rpx] text-[28rpx] text-[#000] rounded-[8rpx] mx-[16rpx]"
                        style="background: #FFEFB8;">市场行情</view>
                </view>
                <view class="mb-[24rpx] w-[100%] pb-[20rpx] flex" style="border-bottom: 2rpx solid #D8D8D8;">
                    <image class="w-[32rpx] h-[32rpx] mr-[16rpx]"></image>
                    <view class="flex-1">
                        <view class="w-[100%] mb-[8rpx] flex justify-between items-center">
                            <text class="text-[#000000] text-[28rpx] font-[500]">看车评估</text>
                            <text class="text-[#FF9E2E] text-[24rpx] font-[500]">确认已看车</text>
                        </view>
                        <view class="text-[#333] text-[24rpx]">
                            看车后请操作“确认已看车”，车主原因无法看车，可在页面发起申诉
                        </view>
                    </view>
                </view>
                <view class="mb-[24rpx] w-[100%] pb-[20rpx] flex" style="border-bottom: 2rpx solid #D8D8D8;">
                    <image class="w-[32rpx] h-[32rpx] mr-[16rpx]"></image>
                    <view class="flex-1">
                        <view class="w-[100%] mb-[8rpx] flex justify-between items-center">
                            <text class="text-[#999] text-[28rpx] font-[500]">联系跟进</text>
                        </view>
                        <view class="text-[#999] text-[24rpx]">
                            2020-01-01 12:12呼出，已接通，通话2分2秒
                        </view>
                    </view>
                </view>
                <view class="mb-[24rpx] w-[100%] pb-[20rpx] flex" style="border-bottom: 2rpx solid #D8D8D8;">
                    <image class="w-[32rpx] h-[32rpx] mr-[16rpx]"></image>
                    <view class="flex-1">
                        <view class="w-[100%] mb-[8rpx] flex justify-between items-center">
                            <text class="text-[#999] text-[28rpx] font-[500]">车源分发</text>
                        </view>
                        <view class="text-[#999] text-[24rpx]">
                            2020-01-01 12:12车源已分发给您，请尽快跟进
                        </view>
                    </view>
                </view>
                <view class="mb-[24rpx] w-[100%] pb-[20rpx] flex" style="border-bottom: 2rpx solid #D8D8D8;">
                    <image class="w-[32rpx] h-[32rpx] mr-[16rpx]"></image>
                    <view class="flex-1">
                        <view class="w-[100%] mb-[8rpx] flex justify-between items-center">
                            <text class="text-[#999] text-[28rpx] font-[500]">车源留资</text>
                        </view>
                        <view class="text-[#999] text-[24rpx]">
                            2020-01-01 12:12用户授权汽车之家平台协助卖车
                        </view>
                    </view>
                </view>
            </view>
        </view>

    </view>
    <view
        class="fixed bottom-0 w-[100%] h-[158rpx] z-[99] bg-[#fff] px-[38rpx] flex justify-between">
        <view class="flex items-center">
            <view class="flex flex-col justify-center text-[#000] text-[24rpx] items-center"> 
                <image src="" class="w-[56rpx] h-[56rpx] mb-[6rpx]"></image>
                <text>关注</text>
            </view>
            <view class="flex mx-[32rpx] flex-col justify-center text-[#000] text-[24rpx] items-center">
                <image src="" class="w-[56rpx] h-[56rpx] mb-[6rpx]"></image>
                <text>申诉</text>
            </view>
        </view>
        <view class="flex items-center">
            <view
                class="w-[196rpx] h-[88rpx] text-center leading-[88rpx] text-[32rpx] text-[#000] rounded-[16rpx] mr-[16rpx]"
                style="background: #FFEFB8;">邀约比武</view>
            <view class="w-[196rpx] h-[88rpx] text-center leading-[88rpx] text-[32rpx] text-[#FFEFB8] rounded-[16rpx]"
                style="background: linear-gradient( 98deg, #454545 0%, #000000 100%);">联系车主</view>
        </view>
    </view>
</template>
<script setup>
import { ref } from 'vue'
const infoList = ref([
    {
        label: '手动填写地域',
        value: '湖北-武汉-江夏',
        key: '',
    },
    {
        label: '上牌时间',
        value: '2025年',
        key: '',
    },
    {
        label: '卖车意向（售卖）',
        value: '快速高价卖车',
        key: '',
    },
    {
        label: '品牌型号',
        value: 'B-奔驰#36,奔驰C级#588,奔驰C级 2024款 改款 C 260L 运动版',
        key: '',
    },
    {
        label: '想多久把车卖掉？',
        value: '越快越好',
        key: '',
    },
    {
        label: '方便上门时间吗？',
        value: '工作时间-上午',
        key: '',
    },
    {
        label: '是否可以免费上门评估备案',
        value: '随时',
        key: '',
    },
    {
        label: '档位变速',
        value: '自动挡',
        key: '',
    },
    {
        label: '牌照归属',
        value: '本地区域牌照',
        key: '',
    },
    {
        label: '行驶里程',
        value: '1万',
        key: '',
    },
    {
        label: '车辆颜色',
        value: '其他',
        key: '',
    },
    {
        label: '车况如何',
        value: '全新',
        key: '',
    },
    {
        label: '过户次数',
        value: '一手',
        key: '',
    },
])
</script>
<style scoped></style>
